{% extends "base.html" %}

{% block menu %}
	<ul>
		<li id="first"><a href="/cassaco">Spent</a></li>
		<li class="active"><a href="/cassaco/settings">Settings</a></li>
		<li><a href="#">Edit account</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
	<div></div>
{% endblock %}

{% block firstColumn %}
	
	<div id="settingsTabs" class="flora">
		<ul>
			<li><a href="#datamigration"><span>Data migration</span></a></li>
			<li><a href="#interface"><span>Interface</span></a></li>
		</ul>
		
		<div id="datamigration">
			<h2>Export your spent</h2>
			<br>
			<form action="/cassaco/export" method="POST" id="exportForm">
				<input type="checkbox" value="all" name="all" id="allSpent"/>All spent
			
				From
			        <input type="text" value="{{ spent.date }}" 
			                name="from" id="datepickerFrom" size="10"/>
			    to
			        <input type="text" value="{{ spent.date }}" 
			                name="to" id="datepickerTo" size="10"/>
			    
			    Format
				<select name="format">
					<option value="csv">CSV
				</select>
			    
				<input type="submit" value="Export"/>
			    
			    <script>
					$("#allSpent").change(function(){
						if (this.checked == true) {
							document.getElementById('datepickerTo').disabled = 'disabled';
							document.getElementById('datepickerFrom').disabled = 'disabled';
						} else {
							document.getElementById('datepickerTo').disabled = '';
							document.getElementById('datepickerFrom').disabled = '';
						}
					});
					
					$('#datepickerTo').datepicker({ dateFormat: 'yy-mm-dd' });
					
					$('#datepickerFrom').datepicker({ dateFormat: 'yy-mm-dd' });
				</script>
			</form>
			<br>
			<h2>Import your spent</h2>
			<br>
			<form action="/cassaco/import" method="POST" enctype="multipart/form-data">
			    Select a file <input type="file" name="file"/>
			    Format
			    <select name="format">
			        <option value="csv">CSV
			    </select>
			    <input type="submit" value="Import"/>
			</form>
		</div>
		
		<div id="interface">
			<form method="POST" action="/cassaco/settings/saveInterfaceSettings">
				How many spent on your list view: 
					<input type="text" size="3" name="spentPerPage" value="10"/>
				<br>
				<input type="submit" value="Save"/>
			</form>
		</div>
	</div>
	<script>
		$('#settingsTabs > ul').tabs();
	</script>
{% endblock %}

{% block secondColumn %}
	
{% endblock %}